import React, { Component } from 'react';
import TweenOne from 'rc-tween-one'
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'
import LanguageButtons from './language-buttons'

class Footer extends Component {
  handleChange (e) {
    console.log('click', e)
  }
  render () {
    const { ...props } = this.props
    const { dataSource } = props
    delete props.dataSource
    delete props.isMobile
    return (
      <div {...props} {...dataSource.wrapper}>
        <OverPack {...dataSource.OverPack}>
          <TweenOne {...dataSource.links}>
            {dataSource.links.children.map((item, i) => (
              <a key={i.toString()} {...item}>
                {item.children}
              </a>
              ))}
          </TweenOne>
          <span >
            <a href='mailto:school@thoughtworks.com' className='contact-font'>Contact Us</a>
          </span>
          <div className='internationalization-style'>
            <LanguageButtons />
          </div>
          <TweenOne
            animation={{ x: '+=30', opacity: 0, type: 'from' }}
            key='copyright'
            {...dataSource.copyright}
          >
            {dataSource.copyright.children.map((item, i) =>
              React.createElement(
                item.name.indexOf('title') === 0 ? 'h1' : 'div',
                { key: i.toString(), ...item },
                typeof item.children === 'string' &&
                item.children.match(/\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/)
                  ? React.createElement('img', {
                    src: item.children,
                    alt: 'img'
                  })
                  : item.children
              ))}
          </TweenOne>
        </OverPack>
      </div>
    )
  }
}

export default Footer
